<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">

<head th:replace="index::head">
</head>
<style>
    .product-img {
        width: 100%;
        height: auto;
    }

    .product-details {
        padding: 20px;
    }

    .product-info {
        padding: 10px 0;
    }
</style>

<body>
    <!-- 导航栏 -->
    <ul class="layui-nav" th:replace="index::nav">

    </ul>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs2" th:replace="index::snav">
            </div>
            <div class="layui-col-xs10">
                <div class="layui-container">
                    <a th:href="'/product/add'">
                        <button type="button" class="layui-btn layui-bg-green">新增</button>
                    </a>
                    <!-- <form action="/product" method="get">
                        <div class="layui-input-block">
                            <input type="search" name="keyword" value="" placeholder="请输入商品名称" autocomplete="off"
                                class="layui-input">
                        </div>
                    </form> -->
                    <table class="layui-table" lay-even lay-skin="line" lay-size="lg">
                        <colgroup>
                            <col width="150">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>产品编号</th>
                                <th>名称</th>
                                <th>价格</th>
                                <th>库存</th>
                                <th>描述</th>
                                <th>图片</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="p:${products}">
                                <td th:text="${p.id}">1001</td>
                                <td th:text="${p.name}">联想电脑</td>
                                <td th:text="${p.price}">5000</td>
                                <td th:text="${p.stock}">100</td>
                                <td th:text="${p.description}">配置xxxxxxxxxxxx</td>
                                <td>
                                    <img th:src="${p.imgUrl}" alt="图片">
                                </td>
                                <td>
                                    <button type="button" class="layui-btn layui-btn-normal"
                                        th:onclick="'edit('+${p.id}+')'">编辑</button>
                                    <button type="button" class="layui-btn layui-btn-danger"
                                        th:onclick="'del('+${p.id}+')'">删除</button>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    function edit(id){
        window.location.href="/product/edit/"+id
    }
    function del(id) {
        layer.confirm('确定要删除这条吗？', {
            btn: ['删除', '取消']
        }, function () {
            $.get("/product/remove/" + id, function (data) {
                if (data.code === 200) {
                    layer.msg("删除成功");
                    setTimeout(() => {
                        window.location.reload();
                    }, 1200);
                }
            })
        }, function () {

        });
    }
</script>

</html>